<template>
  <div class="header-container">
    <el-form :model="headerForm" label-width="80px" ref="seachRef">
      <el-row :gutter="20">
        <el-col :span="6">
          <xm-f-intput
            v-model="headerForm.name"
            prop="categoryName"
            label="分类名称:"
          ></xm-f-intput>
        </el-col>

        <el-col :span="6">
          <el-form-item label="创建时间:" prop="time">
            <XMDatePicker
              v-model="headerForm.time"
              v-model:startTime="headerForm.startTime"
              v-model:endTime="headerForm.endTime"
              type="daterange"
              disabledDateT="after"
              label="选择开始时间:"
              style="width: 180px"
            ></XMDatePicker>
          </el-form-item>
        </el-col>

        <!-- <el-col :span="6">
          <XmFSelect
            v-model="headerForm.status"
            prop="status"
            :options="statusArr"
            label="状态"
            multiple
          ></XmFSelect>
        </el-col> -->
      </el-row>

      <el-row :gutter="20">
        <el-col :span="3">
          <el-button @click="loadData" type="primary" style="width: 100%">
            筛选
          </el-button>
        </el-col>
        <el-col :span="3">
          <el-button @click="clear" style="width: 100%">清空</el-button>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>
<script lang="ts" setup>
  import { ref } from 'vue'
  import XmFSelect from '@/components/XMC/XmForms/XmFSelect/index.vue'

  const props = defineProps({
    headerForm: {
      type: Object,
      default() {
        return {}
      },
    },
  })
  const emits = defineEmits(['update:modelValue', 'clear', 'loadData'])
  // const form = ref()
  const statusArr = [{ label: 'label', value: 'value' }]

  function loadData() {
    emits('loadData', props.headerForm)
  }

  function clear() {
    // form.value = {}
    emits('update:modelValue', props.headerForm)
    emits('clear')
  }
</script>
<style lang="scss" scoped>
  @import '@/styles/mixin.scss';
  .header-container {
    @include card-shadow;
    padding: 12px;
    background-color: white;
    .el-form-item {
      margin-top: 15px;
      margin-bottom: 15px;
    }
  }
</style>
